<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title></title> 

<style>
/**
background: 简写属性，作用是将背景属性设置在一个声明中。
background-attachment: 背景图像是否固定或者随着页面的其余部分滚动。
background-color 属性定义了元素的背景颜色.
background-image 属性描述了元素的背景图像.默认情况下，背景图像进行平铺重复显示，以覆盖整个元素实体.
background-repeat 属性描述元素的背景图像是水平平铺、垂直平铺还是不平铺
background-position 属性改变图像在背景中的位置

当使用简写属性时，属性值的顺序如下，属性无需全部使用，你可以按照页面的实际需要使用
background-color
background-image
background-repeat
background-attachment
background-position

*/


#backgroundColorByHexExample {
	background-color:#b0c4de;
}

#backgroundColorByRgbExample {
	background-color:rgb(255,0,0);
}

#backgroundColorByNameExample {
	background-color:blue;
}

#backgroundImageExample {
	background-image:url("image/bgdesert.jpg");
}

#backgroundImageByRepeatXExample {
	background-image:url("image/bgdesert.jpg");
	background-repeat: repeat-x;
}

#backgroundImageByRepeatYExample {
	background-image:url("image/bgdesert.jpg");
	background-repeat: repeat-y;
	height: 200px;
}

#backgroundImageByNoRepeatExample {
	background-image:url("image/bgdesert.jpg");
	background-repeat: no-repeat;
	height: 100px;
}

#backgroundImageWithPositionExample {
	background-image:url("image/bgdesert.jpg");
	background-repeat: no-repeat;
	background-position: right top;
	height: 100px;
}

#backgroundImageBySimpleExample {
	background:#ffffff url("image/bgdesert.jpg") no-repeat right top;
}

</style>
</head>
<body>

<div id="backgroundColorByHexExample">
	<p>通過十六进制设置背景颜色：background-color:#b0c4de</p>
</div>
<br><br>

<div id="backgroundColorByRgbExample">
	<p>通過RGB设置背景颜色：background-color:rgb(255,0,0)</p>
</div>
<br><br>

<div id="backgroundColorByNameExample">
	<p>通過颜色名称设置背景颜色：background-color:blue</p>
</div>
<br><br>

<div id="backgroundImageExample">
	<p>设置背景图像：background-image:url("image/bgdesert.jpg");</p>
</div>
<br><br>

<div id="backgroundImageByRepeatXExample">
	<p>设置背景图像：background-image:url("image/bgdesert.jpg");background-repeat: repeat-x;</p>
</div>
<br><br>

<div id="backgroundImageByRepeatYExample">
	<p>设置背景图像：background-image:url("image/bgdesert.jpg");background-repeat: repeat-y;</p>
</div>
<br><br>

<div id="backgroundImageByNoRepeatExample">
	<p>设置背景图像：background-image:url("image/bgdesert.jpg");background-repeat: no-repeat;</p>
</div>
<br><br>

<div id="backgroundImageWithPositionExample">
	<p>设置背景图像：background-image:url("image/bgdesert.jpg");background-repeat: no-repeat;background-position: right top;</p>
</div>
<br><br>

<div id="backgroundImageBySimpleExample">
	<p>设置背景：background:#ffffff url("image/bgdesert.jpg") no-repeat right top;</p>
</div>
<br><br>

</body>
</html>